<template>
    <view class="container">
        <!-- 页面头部 -->
        <view class="page-header">
            <view class="header-content">
                <view class="user-avatar-wrapper">
                    <image 
                        :src="getUserAvatar(user)" 
                        class="user-avatar"
                        mode="aspectFill"
                    ></image>
                    <view v-if="user.vip" class="vip-badge">VIP</view>
                </view>
                <view class="user-basic-info">
                    <view class="name-gender">
                        <text class="user-name">{{ user.name || '未设置' }}</text>
                        <view class="gender-badge" :class="{ male: user.sex === 1, female: user.sex === 2 }">
                            {{ user.sex === 1 ? '♂' : '♀' }}
                        </view>
                    </view>
                    <text class="user-id">UID: {{ user.userId || '未设置' }}</text>
                    <view v-if="user.birth" class="user-age">
                        <text class="age-text">{{ formatAge(user.birth) }}岁</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 模块：自我介绍 -->
        <view class="section">
            <text class="section-title">TA的自我介绍</text>
            <view class="introduce">
                <text class="intro">{{ user.description || '未设置' }}</text>
            </view>
        </view>

        <!-- 模块：基本资料 -->
        <view class="section">
            <text class="section-title">TA的基本资料</text>
            <view class="basic-info-grid">
                <view v-if="user.birth" class="info-item">
                    <view class="info-icon">🎂</view>
                    <view class="info-content">
                        <text class="info-label">出生日期</text>
                        <text class="info-value">{{ user.birth }}</text>
                    </view>
                </view>
                <view v-if="user.degree" class="info-item">
                    <view class="info-icon">🎓</view>
                    <view class="info-content">
                        <text class="info-label">学历</text>
                        <text class="info-value">{{ user.degree }}</text>
                    </view>
                </view>
                <view v-if="user.career" class="info-item">
                    <view class="info-icon">💼</view>
                    <view class="info-content">
                        <text class="info-label">职业</text>
                        <text class="info-value">{{ user.career }}</text>
                    </view>
                </view>
                <view v-if="user.address" class="info-item">
                    <view class="info-icon">📍</view>
                    <view class="info-content">
                        <text class="info-label">现居地</text>
                        <text class="info-value">{{ user.address }}</text>
                    </view>
                </view>
                <view v-if="user.height" class="info-item">
                    <view class="info-icon">📏</view>
                    <view class="info-content">
                        <text class="info-label">身高</text>
                        <text class="info-value">{{ user.height }}cm</text>
                    </view>
                </view>
                <view v-if="user.income" class="info-item">
                    <view class="info-icon">💰</view>
                    <view class="info-content">
                        <text class="info-label">收入</text>
                        <text class="info-value">{{ user.income }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 模块：认证信息 -->
        <view class="section">
            <text class="section-title">TA的认证</text>
            <view class="certifications-grid">
                <view class="cert-item">
                    <view class="cert-icon">📱</view>
                    <text class="cert-label">实名认证</text>
                    <text class="cert-status">未认证</text>
                </view>
                <view class="cert-item">
                    <view class="cert-icon">📷</view>
                    <text class="cert-label">真颜认证</text>
                    <text class="cert-status">未认证</text>
                </view>
                <view class="cert-item">
                    <view class="cert-icon">🎓</view>
                    <text class="cert-label">学历认证</text>
                    <text class="cert-status">未认证</text>
                </view>
                <view class="cert-item">
                    <view class="cert-icon">💼</view>
                    <text class="cert-label">工作认证</text>
                    <text class="cert-status">未认证</text>
                </view>
            </view>
        </view>

        <!-- 模块：个人相册 -->
        <view class="section">
            <text class="section-title">TA的个人相册</text>
            <view v-if="user.cover && user.cover.length > 0" class="photo-gallery">
                <image 
                    v-for="(photo, index) in user.cover" 
                    :key="index"
                    :src="photo" 
                    class="gallery-photo"
                    mode="aspectFill"
                    @click="previewImage(photo, index)"
                />
            </view>
            <view v-else class="empty-state">
                <text class="empty-text">TA还没有发布照片哦</text>
            </view>
        </view>

        <!-- 模块：择偶条件 -->
        <view class="section">
            <text class="section-title">TA的择偶条件</text>
            <view v-if="user.othInfo" class="mate-criteria">
                <view v-if="user.othInfo.age" class="criteria-item">
                    <text class="criteria-label">年龄要求</text>
                    <text class="criteria-value">{{ user.othInfo.age }}</text>
                </view>
                <view v-if="user.othInfo.height" class="criteria-item">
                    <text class="criteria-label">身高要求</text>
                    <text class="criteria-value">{{ user.othInfo.height }}</text>
                </view>
                <view v-if="user.othInfo.degree" class="criteria-item">
                    <text class="criteria-label">学历要求</text>
                    <text class="criteria-value">{{ user.othInfo.degree }}</text>
                </view>
                <view v-if="user.othInfo.income" class="criteria-item">
                    <text class="criteria-label">收入要求</text>
                    <text class="criteria-value">{{ user.othInfo.income }}</text>
                </view>
                <view v-if="user.othInfo.address" class="criteria-item">
                    <text class="criteria-label">地区要求</text>
                    <text class="criteria-value">{{ user.othInfo.address }}</text>
                </view>
            </view>
            <view v-else class="empty-state">
                <text class="empty-text">TA还没有设置择偶条件</text>
            </view>
        </view>

        <!-- 模块：用户统计 -->
        <view class="section">
            <text class="section-title">TA的统计信息</text>
            <view class="stats-grid">
                <view class="stat-item">
                    <text class="stat-value">{{ user.score || 0 }}</text>
                    <text class="stat-label">综合评分</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ user.rate || 0 }}</text>
                    <text class="stat-label">星级评分</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ user.pv || 0 }}</text>
                    <text class="stat-label">浏览次数</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ user.recommendCount || 0 }}</text>
                    <text class="stat-label">推荐次数</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ user.wishCount || 0 }}</text>
                    <text class="stat-label">心动次数</text>
                </view>
                <view class="stat-item">
                    <text class="stat-value">{{ user.collectCount || 0 }}</text>
                    <text class="stat-label">收藏次数</text>
                </view>
            </view>
        </view>

        <!-- 底部固定按钮 -->
        <view class="fixed-footer">
            <view class="footer-btn" @click="footerButton(0)">
                <view class="footer-icon">📋</view>
                <text class="footer-text">我的卡片</text>
            </view>
            <view class="footer-btn" @click="footerButton(1)">
                <view class="footer-icon">📤</view>
                <text class="footer-text">推荐给好友</text>
            </view>
            <view class="footer-btn" @click="footerButton(2)" :class="{ active: user.wish === 1 }">
                <view class="footer-icon">💖</view>
                <text class="footer-text">{{ user.wish === 1 ? '已心动' : '心动TA' }}</text>
            </view>
            <view class="footer-btn" @click="footerButton(3)" :class="{ active: user.collect === 1 }">
                <view class="footer-icon">⭐</view>
                <text class="footer-text">{{ user.collect === 1 ? '已收藏' : '收藏TA' }}</text>
            </view>
            <view class="footer-btn" @click="footerButton(4)">
                <view class="footer-icon">💬</view>
                <text class="footer-text">帮我约TA</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        // 页面级分享配置
        onShareAppMessage() {
            return {
                title: this.user.name,  // 分享的标题
                path: `/subPackage1/marriageDetail/marriageDetail?id=${this.id}`,  // 分享的路径（可以加查询参数）
                imageUrl: this.user.cover,  // 分享的图片
            };
        },
        data() {
            return {
                showModal: false, // 控制弹窗显示/隐藏
                user: {},
                id: 0,
            }
        },
        onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
            this.id = option.id
        },
        methods: {
            // 获取用户头像
            getUserAvatar(user) {
                if (user.cover && Array.isArray(user.cover) && user.cover.length > 0) {
                    return user.cover[0];
                }
                return '/static/img/tabs/my.png';
            },

            // 格式化年龄
            formatAge(birth) {
                if (!birth) return '';
                // 如果已经是格式化的日期字符串，计算年龄
                if (typeof birth === 'string' && birth.includes('-')) {
                    const birthDate = new Date(birth);
                    const today = new Date();
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const monthDiff = today.getMonth() - birthDate.getMonth();
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }
                    return age;
                }
                // 如果是时间戳，计算年龄
                if (typeof birth === 'number') {
                    const birthDate = new Date(birth);
                    const today = new Date();
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const monthDiff = today.getMonth() - birthDate.getMonth();
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }
                    return age;
                }
                return '';
            },

            // 预览图片
            previewImage(current, index) {
                const urls = this.user.cover || [];
                uni.previewImage({
                    current: current,
                    urls: urls
                });
            },

            // 底部按钮操作
            footerButton(index) {
                var t = this
                switch (index) {
                    case 0:
                        this.f.nav('/subPackage1/myProfile/myProfile')
                        break;
                    case 1:
                        // 如果 uni.share 不支持，提示用户使用右上角分享
                        uni.showToast({
                            title: '请点击右上角分享给好友',
                            icon: 'none',
                            duration: 2000
                        });
                        break;
                    case 2:
                        // 心动功能
                        t.$api.req('/dating/member/relative', {
                            objId: t.user.userId,
                            type: 1,
                            deleted: t.user.wish === 1
                        }, 'POST', 'JSON', false).then(res => {
                            if (res.code === 0) {
                                t.getDatingMember();
                                uni.showToast({
                                    title: t.user.wish === 1 ? '取消心动成功' : '心动成功',
                                    icon: 'success'
                                });
                            } else {
                                uni.showToast({
                                    title: res.msg || '操作失败',
                                    icon: 'none'
                                });
                            }
                        }).catch(err => {
                            console.error('心动操作失败:', err);
                            uni.showToast({
                                title: '网络错误',
                                icon: 'none'
                            });
                        });
                        break;
                    case 3:
                        // 收藏功能
                        t.$api.req('/dating/member/relative', {
                            objId: t.user.userId,
                            type: 2,
                            deleted: t.user.collect === 1
                        }, 'POST', 'JSON', false).then(res => {
                            if (res.code === 0) {
                                t.getDatingMember();
                                uni.showToast({
                                    title: t.user.collect === 1 ? '取消收藏成功' : '收藏成功',
                                    icon: 'success'
                                });
                            } else {
                                uni.showToast({
                                    title: res.msg || '操作失败',
                                    icon: 'none'
                                });
                            }
                        }).catch(err => {
                            console.error('收藏操作失败:', err);
                            uni.showToast({
                                title: '网络错误',
                                icon: 'none'
                            });
                        });
                        break;
                    case 4:
                        // 组装首条消息，带上要约的人物信息
                        const preset = encodeURIComponent(
                            `帮我约TA：${this.user.name || ''}（UID:${this.user.userId || ''}）`);
                        const avatar = encodeURIComponent(this.getUserAvatar(this.user));
                        // 优先跳转至商城客服聊天页，并携带预置消息/头像/姓名
                        uni.navigateTo({
                            url: `/yudao-mall-uniapp/pages/chat/index?preset=${preset}&userName=${encodeURIComponent(this.user.name || '')}&userAvatar=${avatar}&userId=${this.user.userId || ''}`,
                            fail: () => {
                                // 若路径不可达，则回退到本项目内的聊天页
                                this.f.nav(`/subPackage1/chat/chat?userId=${this.user.userId}&name=${this.user.name}`)
                            }
                        })
                        break;
                }
            },

            // 获取会员详细信息
            getDatingMember() {
                var t = this
                t.$api.req('/dating/member/get', {
                    userId: t.id
                }, 'get', 'JSON', false).then(res => {
                    if (res.code === 0) {
                        t.user = res.data || {};
                        console.log('用户详情:', t.user);
                    } else {
                        uni.showToast({
                            title: res.msg || '获取用户信息失败',
                            icon: 'none'
                        });
                    }
                }).catch(err => {
                    console.error('获取用户详情失败:', err);
                    uni.showToast({
                        title: '网络错误',
                        icon: 'none'
                    });
                });
            }
        },
        mounted() {
            this.getDatingMember()
        }
    };
</script>

<style lang="scss" scoped>
    /* 页面整体容器 */
    .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
        padding-bottom: 120rpx;
    }

    /* 页面头部 */
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 50rpx 30rpx 40rpx;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.3;
    }

    .header-content {
        display: flex;
        align-items: center;
        gap: 30rpx;
        position: relative;
        z-index: 2;
    }

    .user-avatar-wrapper {
        position: relative;
        filter: drop-shadow(0 8rpx 20rpx rgba(0, 0, 0, 0.2));
    }

    .user-avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        border: 6rpx solid rgba(255, 255, 255, 0.4);
        transition: transform 0.3s ease;
    }

    .user-avatar:hover {
        transform: scale(1.05);
    }

    .vip-badge {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        background: linear-gradient(135deg, #ffd700, #ffed4e);
        color: #8b4513;
        font-size: 20rpx;
        font-weight: 700;
        padding: 6rpx 12rpx;
        border-radius: 12rpx;
        box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.4);
        animation: vipGlow 2s ease-in-out infinite;
    }

    @keyframes vipGlow {
        0%, 100% { box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.4); }
        50% { box-shadow: 0 6rpx 16rpx rgba(255, 215, 0, 0.6); }
    }

    .user-basic-info {
        flex: 1;
        position: relative;
        z-index: 2;
    }

    .name-gender {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
    }

    .user-name {
        font-size: 42rpx;
        font-weight: 700;
        margin-right: 16rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }

    .gender-badge {
        font-size: 28rpx;
        padding: 8rpx 12rpx;
        border-radius: 16rpx;
        font-weight: 700;
        backdrop-filter: blur(10rpx);
        transition: all 0.3s ease;
    }

    .gender-badge.male {
        background: rgba(79, 195, 247, 0.3);
        color: #4fc3f7;
        border: 2rpx solid rgba(79, 195, 247, 0.5);
    }

    .gender-badge.female {
        background: rgba(240, 98, 146, 0.3);
        color: #f06292;
        border: 2rpx solid rgba(240, 98, 146, 0.5);
    }

    .user-id {
        font-size: 26rpx;
        opacity: 0.9;
        margin-bottom: 10rpx;
        font-weight: 500;
    }

    .user-age {
        font-size: 28rpx;
        opacity: 0.95;
        font-weight: 600;
    }

    /* 每个模块的基础样式 */
    .section {
        margin: 24rpx 30rpx;
        padding: 36rpx;
        border-radius: 24rpx;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
        border: 1rpx solid rgba(255, 255, 255, 0.8);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .section:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
    }

    .section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4rpx;
        /* background: linear-gradient(90deg, #667eea, #764ba2, #a55fee); */
    }

    .section-title {
        font-size: 36rpx;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 24rpx;
        position: relative;
        display: flex;
        align-items: center;
    }

    .section-title::before {
        content: '';
        width: 8rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 4rpx;
        margin-right: 16rpx;
    }

    /* 自我介绍文本样式 */
    .intro {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        background: #f8f9fa;
        padding: 20rpx;
        border-radius: 12rpx;
        border-left: 4rpx solid #a55fee;
    }

    /* 基本资料网格样式 */
    .basic-info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
    }

    .info-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        border: 1rpx solid #e9ecef;
    }

    .info-icon {
        font-size: 32rpx;
        margin-right: 16rpx;
    }

    .info-content {
        flex: 1;
    }

    .info-label {
        display: block;
        font-size: 22rpx;
        color: #999;
        margin-bottom: 4rpx;
    }

    .info-value {
        display: block;
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
    }

    /* 认证信息网格样式 */
    .certifications-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16rpx;
    }

    .cert-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        border: 1rpx solid #e9ecef;
    }

    .cert-icon {
        font-size: 32rpx;
        margin-bottom: 8rpx;
    }

    .cert-label {
        font-size: 24rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 4rpx;
    }

    .cert-status {
        font-size: 20rpx;
        color: #999;
    }

    /* 相册样式 */
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12rpx;
    }

    .gallery-photo {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
        object-fit: cover;
    }

    /* 择偶条件样式 */
    .mate-criteria {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
    }

    .criteria-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        border: 1rpx solid #e9ecef;
    }

    .criteria-label {
        font-size: 26rpx;
        color: #666;
    }

    .criteria-value {
        font-size: 26rpx;
        color: #333;
        font-weight: 500;
    }

    /* 统计信息网格样式 */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16rpx;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        border: 1rpx solid #e9ecef;
    }

    .stat-value {
        font-size: 32rpx;
        font-weight: 600;
        color: #a55fee;
        margin-bottom: 8rpx;
    }

    .stat-label {
        font-size: 22rpx;
        color: #666;
    }

    /* 空状态样式 */
    .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60rpx 0;
    }

    .empty-text {
        font-size: 26rpx;
        color: #999;
    }

    /* 底部固定按钮区域 */
    .fixed-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 24rpx 20rpx;
        box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.12);
        border-top: 1rpx solid rgba(0, 0, 0, 0.05);
        z-index: 1000;
        backdrop-filter: blur(20rpx);
    }

    .footer-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16rpx 12rpx;
        border-radius: 20rpx;
        transition: all 0.3s ease;
        min-width: 100rpx;
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .footer-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .footer-btn:active {
        transform: scale(0.95);
    }

    .footer-btn:active::before {
        opacity: 1;
    }

    .footer-btn.active {
        background: linear-gradient(135deg, #ff4757, #ff6b7a);
        color: white;
        box-shadow: 0 4rpx 16rpx rgba(255, 71, 87, 0.3);
    }

    .footer-icon {
        font-size: 36rpx;
        margin-bottom: 8rpx;
        position: relative;
        z-index: 2;
        transition: transform 0.3s ease;
    }

    .footer-btn:active .footer-icon {
        transform: scale(1.1);
    }

    .footer-text {
        font-size: 24rpx;
        color: #666;
        font-weight: 600;
        position: relative;
        z-index: 2;
        transition: color 0.3s ease;
    }

    .footer-btn.active .footer-text {
        color: white;
    }

    .footer-btn.active .footer-icon {
        color: #e74c3c;
    }

    /* 收藏按钮激活状态 */
    .footer-btn:nth-child(4).active {
        background: #fff8e1;
    }

    .footer-btn:nth-child(4).active .footer-text {
        color: #ff9800;
    }

    .footer-btn:nth-child(4).active .footer-icon {
        color: #ff9800;
    }

    /* 响应式适配 */
    @media screen and (max-width: 750rpx) {
        .basic-info-grid {
            grid-template-columns: 1fr;
        }
        
        .certifications-grid {
            grid-template-columns: 1fr;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .photo-gallery {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>